<template>
  <div class="home-wrapper scroll-style">
    <div class="home-page">
      <div id="home-nav" :class="scrollChangeBg">
        <header-content :menuTextColor="menuTextColor" :menuBgColor="menuBgColor"></header-content>
      </div>
      <el-container class="home-content-wrapper">
        <router-view/>
      </el-container>
      <footer>
        <footer-content></footer-content>
      </footer>
    </div>
  </div>
</template>

<script>
  import HeaderContent from '@/components/common/HeaderContent.vue'
  import FooterContent from '@/components/common/FooterContent.vue'

  export default {
    name: 'Index',
    components: {
      HeaderContent,
      FooterContent,
    },
    data () {
      return {
        isRouterAlive: true,
        scrollChangeBg: 'bg-transparent',
        menuTextColor: 'white',
        menuBgColor: 'rgba(21, 22, 23, 0.1)',
      }
    },
    mounted () {
      window.addEventListener('scroll', this.handleScroll, true)
    },
    methods: {
      handleScroll: function () {
        let scrollTop = document.querySelector('.home-wrapper')
        if (scrollTop.scrollTop <= 50) {
          this.scrollChangeBg = 'bg-transparent'
          this.menuTextColor = 'white'
          this.menuBgColor = 'rgba(21, 22, 23, 0.1)'
        } else {
          this.scrollChangeBg = 'bg-white'
          this.menuBgColor = 'rgba(21, 22, 23, 0.8)' // black
          this.menuTextColor = 'white'
        }
      }
    }
  }
</script>
<style lang="scss" ref="stylesheet/scss" scoped>
  .home-wrapper {
    overflow: auto;
    width: 100%;
    position: relative;
    height: 100%;
    background-color: rgba(21, 22, 23, 0.9);
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;

    .home-page {
      position: relative;

      #home-nav {
        top: 0;
        z-index: 15;
        right: 8px;
        width: 100%;
        position: fixed;
        // background-color: transparent;
        border-bottom: 1px solid transparent;
      }

      .bg-transparent {
        color: black;
        background-color: transparent;
        border-bottom: 1px solid transparent;
      }
      .bg-white {
        width: 100%;
        color: white;
        background-color: rgba(21, 22, 23, 0.8);
        border-bottom: 1px solid transparent;
      }

      .home-content-wrapper {
        width: 100%;
        margin-bottom: 20px;
      }
    }
  }
</style>
